<template>
  <div id="app">
    <Tabbar>
      <template v-slot:title>
        <div class="title">首页</div>
      </template>
      <template v-slot:icon>
        <div class="iconfont icon-faxian-copy" @click="home"></div>
      </template>
         <template v-slot:title1>
        <div class="title">分类</div>
      </template>
      <template v-slot:icon1>
        <div class="iconfont icon-liebiao"  @click="classify"></div>
      </template>   <template v-slot:title2>
        <div class="title">购物车</div>
      </template>
      <template v-slot:icon2>
        <div class="iconfont icon-gouwuche" @click="shopping"></div>
      </template>   <template v-slot:title3>
        <div class="title">我的</div>
      </template>
      <template v-slot:icon3>
        <div class="iconfont icon-wodedangxuan" @click="my"></div>
      </template>
    </Tabbar>
    <router-view />
  </div>
</template>
<script>
import Tabbar from "./components/Tabbar";
export default {
  components: {
    Tabbar,
  },
  data() {
    return {};
  },
  methods:{
    home(){
      this.$router.push({path:"/Home"})
    },
    classify(){
      this.$router.push({path:"/Classify"})
    },
    shopping(){
      this.$router.push({path:"/Shopping"})
    },
    my(){
       this.$router.push({path:"/My"})
    }
  }
};
</script>
<style  scoped>
.title {
    width: 60px;
    float: left;
    margin-left: -46px;
    margin-top: 6px;
    color:red;
}
.iconfont {
width: 55px;
    float: left;
    margin-left: 20px;
    height: 31px;
    text-align: center;
    line-height: 30px;
    margin-top: 31px;
    font-size: 30px;
    color: red;
}
</style>